<template>
  <div class="gift_list">
    <div class="changerecord" @click= "gorecord">兑换记录</div>
    <div class="top_wrapper">
      <img src="https://wxoss.xiaoniaoai.com/bg@2x.png" alt="">
      
      <header>
        <div class="header-left iconfont icon-left" @click="goback" style="z-index:999"></div>
        <div class="header-right">
          人气兑换
        </div>
      </header>

      <div class="top_content">
        <p>人气值</p>
        <p>{{infos}}</p>
      </div>
    </div>

    <ul class="content_wrapper">
      <li v-for="(item,ins) in giftlist" :key="ins">
        <div class="item_box">
          <img src="https://oss.xiaoniaoai.com/hot.png">
          <div class="box">
            <img  :src="item.thumb" alt="">
            <div class="box_bottom">
              <p class="tip_title">{{item.name}}</p>
              <p class="tip_content">
                积分兑换：
                <span>{{item.score}}</span>
              </p>
            </div>
          </div>
        </div>
        <div class="btn_gift">
          <img src="https://wxoss.xiaoniaoai.com/growth_archives/img/button.png" alt="">
          <p @click= "change($event,ins)">立即兑换</p>
        </div>
      </li>
    </ul>
    <!-- <div class="shopcar" @click= "goaddress"><mt-badge  size="small" color="red"  type="success">{{shopnum}}</mt-badge><i class="iconfont icon-gouwuche"></i></div> -->
     <div class="wrapper-sixth" v-if = "showsignin">
             <div class="wrapper-touch"> 
                <shopcar v-on:closeMain= "closeMain"/>
            </div> 
            
        </div>
  </div>
</template>

<script>
import shopcar from "@/pages/shopcar"
import Vue from 'vue';
import axios from "axios"
import { Toast } from 'mint-ui';
import { Badge } from 'mint-ui';
Vue.component(Badge.name, Badge);
  export default {
    name: "gift_list",
    inject:['reload'],
    data: function () {
      return {
         showsignin:false,
         infos:'',
         shopnum:'0',
         shopcon:[],
         confir:localStorage.getItem('confir'),
         imgs:'',
         giftlist:'',
         giftids:'',
         id: localStorage.getItem('user_id'),
         uid: localStorage.getItem('user_uid'),
      }
    },
  components: {
    shopcar
  },
    methods:{
      goback(){
        this.$router.go(-1)
      },
      closeMain(val){
        this.showsignin= val;
      
        localStorage.setItem('confir', '1');
        
        this.reload()
      },
      change (e,index) {
        console.log(e)
         var val =e.path[2].firstElementChild.getElementsByClassName("tip_content")[0].getElementsByTagName("span")[0].innerHTML
                              if( val > this.infos){
                                    Toast({
                                          message: '人气不足，快去攒人气把！',
                                          position: 'middle',
                                          duration: 1000
                                          })
                              }else{
                                  
          this.showsignin = true;
           axios.post('https://shixiaozhang.cn/api/app/courserecord/find_gift_list',{
                }).then((val) => {
                this.giftids=val.data.data[index].id
                axios.post('https://shixiaozhang.cn/api/app/courserecord/add_gift_user',{
                    uid:this.uid,
                    stu_id:this.id,
                    gift_id:this.giftids,
                    username:localStorage.getItem('usernames'),
                    mobile:localStorage.getItem('mobiles'),
                    address:localStorage.getItem('address'),
                      }).then((val) => {
                      
                          Toast({
                            message: val.data.msg,
                            position: 'middle',
                            duration: 1000
                          })
                      }).catch((err) => {
                        console.log(err);
                      })
                  this.giftlist = val.data.data
                }).catch((err) => {
                console.log(err);
                })
                                    this.infos = this.infos - val;
                                    this.shopnum++;
                                    this.shopcon.push(val)
                   if(this.confir == '1'){
           this.showsignin = false;
        }else{
                              
        } 
                                 
                          }
       
      
      },
       goaddress () {
         this.$router.push('/shopcar')      
       },
       gorecord () {
         this.$router.push('/changerecord')      
       }
    },
    created(){
       axios.post('https://shixiaozhang.cn/api/app/courserecord/find_gift_list',{
                }).then((val) => {
                    console.log(val)
                    console.log(val.data.code)
                      Toast({
                    message: val.data.msg,
                    position: 'middle',
                    duration: 1000
                    })
                  this.giftlist = val.data.data
                }).catch((err) => {
                console.log(err);
                })
        axios.post('https://shixiaozhang.cn/api/app/courserecord/find_student',{
        id:this.id
        }).then((val) => {
           console.log(val);
          this.infos = val.data.data.score;
        }).catch((err) => {
          console.log(err);
        })
    },
    mounted(){
      this.WXConfig.wxShowMenu(); 
    }
  }
</script>
<style scoped>
.changerecord{
  font-size:.27rem;
  position: absolute;
  right: 5%;
  top: 5%;
  color: #ffff;
  z-index: 999;
}
.shopcar{
  width:1rem;
  height: 1rem;
  position: fixed;
  bottom: .2rem;
  right: -.2rem
}
.shopcar >i {
  width: .6rem;
  height:.6rem;
  display: block;
  font-size:.7rem;
  position: relative;
  top:-.18rem
}
  .gift_list{
    background: #FFFFFF;
  }
  .top_wrapper{
    width: 100%;
    position: relative;
  }
  .top_wrapper > img{
    width: 100%;
    position: absolute;
    top: 0;
  }
  header{
    width: 100%;
    height: 1rem;
    font-size: .38rem;
    color: #ffffff;
    display: flex;
    align-items: center;
    padding: 0 .4rem;
    position: absolute;
    top: 0;
  }
  .header-right{
    margin-left: .4rem;
  }
  .top_content{
    width: 100%;
    font-size: .32rem;
    text-align: center;
    position: absolute;
    margin-top: 12%;
  }
  .top_content p:nth-child(1){
    color: rgba(239, 254, 252, .74);
    line-height: .8rem;
  }
  .top_content p:nth-child(2){
    color: #FFFFFF;
    font-size: .46rem;
  }
  .content_wrapper{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    position: relative;
    width: 100%;
    margin: auto;
    padding-top: 65%;
  }
  .content_wrapper li{
    width: 2.8rem;
    margin: 0 4%;
  }
  .content_wrapper li .item_box{
    width: 100%;
    padding: .1rem .1rem .3rem;
    background: #FFFFFF;
    border-radius:5px;
    box-shadow: 0 0 .3rem #E5E3E3;
    position: relative;
  }
  .content_wrapper li .item_box > img{
    position: absolute;
    top: 0;
    left: 0;
    width: .82rem;
    height: .82rem;
  }
  .box > img{
    width: 100%;
  }
  .tip_title{
    font-size: .22rem;
    color: #878787;
    margin: 2% 0 4%;
  }
  .tip_content{
    font-size: .22rem;
    color: #696969;
  }
  .tip_content span{
    font-size: .3rem;
    color: #FDC600;
  }
  .btn_gift{
    position: relative;
  }
  .btn_gift > img{
    display: block;
    width: 55%;
    margin:10% auto;
  }
  .btn_gift > p{
    position: absolute;
    top: 17%;
    font-size: .24rem;
    color: #FFFFFF;
    left: calc(50% - 17%);
    cursor: pointer; 
    -webkit-tap-highlight-color: transparent;
  }
  .wrapper-sixth{
    width:100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(100, 89, 89, 0.397);
    z-index: 999;
}
.wrapper-sixth > .wrapper-touch{
    width: 75%;
    height: 9rem;
    position: fixed;
    top: 10%;
    left: 12.5%;
    z-index: 1000;
}
/* .wrapper-sixth > .wrapper-touch > img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
.wrapper-sixth > .wrapper-touch> .confirm{
    width: 50%;
    height: .72rem;
    border-radius: 20px;
    position: absolute;
    bottom: 5%;
    left: 25%;
    line-height: .72rem;
    text-align: center;
    background: #fdc600;
    z-index: 1000;
    color:#fff;
    font-size: .32rem
}
.wrapper-sixth> .wrapper-touch>span{
    font-size:.69rem;
    font-family:PingFang-SC-Heavy;
    font-weight:800;
    color:rgba(4,222,183,1);
    position: absolute;
    left: 45%;
    top:17.3%;
    z-index: 1000;
}
.wrapper-sixth> .wrapper-touch>p{
    display:flex;
    height: 30%;
    width: 50%;
    font-size: .2rem;
    position: absolute;
    left: 25%;
    top:40%;
    justify-content:space-around;
    align-items: center;
    flex-direction: column;
}
.wrapper-sixth> .wrapper-touch>p>span:nth-child(2){
    font-size:.26rem;
    font-family:'PingFang-SC-Medium';
    font-weight:500;
    color:rgba(255,255,255,1);
}
.wrapper-sixth> .wrapper-touch>p>span:nth-child(3){
    font-size:.24rem;
    font-family:'PingFang-SC-Medium';
    font-weight:500;
    color:rgba(255,255,255,1);
   
} */
</style>
